<#import "../../layout/single.ftl" as layout>
<@layout.single bodyClass="gray-bg" title="${(action=='created')?string('我的申请','我的办结')}" css=["css/plugins/bootstrap-table/bootstrap-table.min.css"] javascripts=["plugins/bootstrap-table/bootstrap-table.min.js","plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js","plugins/layui/layer/layer.js"]>
<div class="container-fluid">
    <div class="wrapper wrapper-content">
        <div class="col-sm-12 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content" style="position: relative;">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-white" onclick="instance.list();">所 有</button>
                                <button class="btn btn-white" onclick="instance.list('UNFINISHED');">未完成</button>
                                <button class="btn btn-white" onclick="instance.list('FINISHED');">已完成</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="task-datas">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <table id="table" data-toggle="table" data-id-field="taskId"
                                   data-url="${request.contextPath}/flow/instances/created"
                                   data-side-pagination="server"
                                   data-pagination="true" data-page-size="${Application.pageSize}" data-type="json">
                                <thead>
                                <tr>
                                    <th data-field="state" data-checkbox="true"></th>
                                    <th data-field="modelName">流程类型</th>
                                    <th data-field="startTimeStr" data-sortable="true">发起时间</th>
                                    <th data-field="createUser" data-formatter="datatablesfn.showUser">发起用户</th>
                                    <th data-field="status" data-formatter="datatablesfn.showStatus">流程状态</th>
                                    <th data-formatter="showDetail" data-field="processInstanceId">操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var $table = $('#table');

    function showDetail(value, row, index) {
        var html = [];
        html.push("<div class='pull-right'>");
        html.push("<a href='javascript:void(0);' onclick='instance.detail(" + value + ");' class='btn btn-primary'>详 情</a>");
        html.push("  ")
        if (row.status == "UNFINISHED") {
            html.push("<a href='javascript:void(0);' onclick='instance.suspend(" + value + ");' class='btn btn-info'>挂 起</a>");
            html.push("  ")
        } else if (row.status == "SUSPENDED") {
            html.push("<a href='javascript:void(0);' onclick='instance.active(" + value + ");' class='btn btn-info'>激 活</a>");
            html.push("  ")
        }
        if (row.status == "FINISHED") {
            html.push("<a href='javascript:void(0);' onclick='instance.delete(" + value + ");' class='btn btn-default'>删 除</a>");
            html.push("</div>");
        }
        return html.join("");
    }
</script>
</@layout.single>